<template>
  <div class="menu">
    <ul @mouseleave="leave">
      <li v-for="(item, index) in menu_title" :key="index" @mouseenter="over">
        <nuxt-link to="/product">
          <span>{{ item }}</span>
        </nuxt-link>
        <i class="el-icon-arrow-right" />
      </li>
    </ul>
    <div v-if="active" class="extend-list" @mouseenter="enter" @mouseleave="leave">
      <dl v-for="(item, index) in filter_list" :key="index">
        <dt>{{ item.title }}</dt>
        <dd v-for="(im, idx) in item.itemList" :key="idx">
          <nuxt-link to="/product">
            {{ im }}
          </nuxt-link>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: false,
      timer: '',
      menu_title: ['女装 / 男装 / 内衣', '鞋靴 / 箱包 / 配件', '童装玩具 / 孕产 / 用品', '家电 / 数码 / 手机', '美妆 / 洗护 / 保健品', '珠宝 / 眼镜 / 手表', '运动 / 户外 / 乐器', '游戏 / 动漫 / 影视', '美食 / 生鲜 / 零食', '鲜花 / 宠物 / 农资'],
      menu_list: [],
      filter_list: []
    }
  },
  async mounted () {
    const { status, data } = await this.$axios.get('/goods/getTypes')
    const self = this
    if (status === 200) {
      self.menu_list = data.itemList
    }
  },
  methods: {
    over (e) {
      const keyword = e.target.querySelector('span').innerHTML
      this.filter_list = this.menu_list.filter((item) => {
        return keyword.includes(item.title)
      })
      this.active = true
    },
    enter () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.active = true
    },
    leave () {
      this.timer = setTimeout(() => {
        this.active = false
      }, 100)
    }
  }
}
</script>

<style lang="stylus" scoped>
.menu
  width 100%
  border 1px solid #95a5a6
  border-top 0
  ul
    padding-left 15px
    li
      padding-top 20px
      color #2c3e50
      line-height 25px
      height 25px
      font-size 15px
      &:hover
        color #bdc3c7
      &:last-child
        margin-bottom 20px
      span
        cursor pointer
      i
        float right
        line-height 25px
  .extend-list
    position absolute
    top -10px
    left 207px
    border 1px solid red
    border-top 0
    width 520px
    color #000
    z-index 5
    background #fff
    overflow scroll
    height 470px
    dl
      padding 10px 5px 0px 5px
      font-size 14px
      dt
        font-size 18px
        color red
        padding 5px 0
      dd
        display inline-block
        cursor pointer
        margin 10px 5px 5px 10px
        &:hover
          color #e67e22
</style>
